import React, { useState, useEffect } from 'react';
import { Card } from '../../components/Card';
import { Toggle } from '../../components/Toggle';
import { Button } from '../../components/Button';
import { useChromeStorage } from '../../hooks/useChromeStorage';
import './PracticesTab.css';

export const PracticesTab = () => {
  const [reminders, setReminders] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    chrome.storage.local.get(['reminders'], (result) => {
      const reminderList = result.reminders || [];
      setReminders(reminderList);
      setLoading(false);
    });
  }, []);

  const practices = [
    { id: 'breathing', name: 'Breathing', reminderId: 'deep-breathing' },
    { id: 'mood-journal', name: 'Mood Journal', reminderId: 'meditation' },
    { id: 'warm-ups', name: 'Warm-Up\'s', reminderId: 'movement' }
  ];

  const handleToggle = async (practiceId, reminderId, enabled) => {
    if (reminderId) {
      const updatedReminders = reminders.map(r =>
        r.id === reminderId ? { ...r, enabled } : r
      );
      await chrome.storage.local.set({ reminders: updatedReminders });
      setReminders(updatedReminders);
    }
  };

  const handlePlay = (practiceId) => {
    if (practiceId === 'breathing') {
      chrome.tabs.create({ url: chrome.runtime.getURL('breathing.html') });
    }
  };

  if (loading) {
    return <div className="loading">Loading practices...</div>;
  }

  return (
    <div className="practices-tab">
      <h2 className="section-title">Auto-displayed practices</h2>
      
      <Card className="practice-card breathing-practice" variant="gradient">
        <div className="practice-icon">🌬️</div>
        <div className="practice-content">
          <h3>Breathing Exercise</h3>
          <p>5-minute guided breathing exercise with timer. Follow the 4-7-8 technique for stress relief and HRV improvement.</p>
          <Button onClick={() => handlePlay('breathing')}>Start Breathing Mode</Button>
        </div>
      </Card>

      <div className="practices-list">
        {practices.map((practice) => {
          const reminder = reminders.find(r => r.id === practice.reminderId);
          const enabled = reminder ? reminder.enabled : true;
          
          return (
            <div key={practice.id} className="practice-item">
              <span className="practice-name">{practice.name}</span>
              <Toggle
                checked={enabled}
                onChange={(e) => handleToggle(practice.id, practice.reminderId, e.target.checked)}
              />
              <button
                className="play-btn"
                onClick={() => handlePlay(practice.id)}
                title={`Play ${practice.name}`}
              >
                ▶
              </button>
            </div>
          );
        })}
      </div>

      <Card className="ai-card">
        <div className="ai-card-content">
          <div className="ai-sparkles">✨✨</div>
          <div className="ai-glow"></div>
          <h3>Personalized AI</h3>
          <p>Self-learn based on your patterns and behavior</p>
          <Button onClick={() => alert('AI activation feature coming soon!')}>
            Activate
          </Button>
        </div>
      </Card>
    </div>
  );
};

